<extend name="Base/common" />
<block name="body">
<style type="text/css">
.money {
	width: 50px;
}
.specTable .param {
	display: none;
}
.specTable p {
	display: block;
	line-height: 50px;
}
.text-center {
	text-align: center;
}
.check-tips {
	color: #aaa;
	margin-left:2px;
}
.cf{
	margin-left:20px;
}
</style>
  <!-- 标签页导航 -->
  <div class="span9 page_message">
    <section id="contents">
      <ul class="tab-nav nav">
        <li class=""><a href="{:U('lists')}">表单列表</a></li>
        <li class="current"><a href="javascript:;">编辑表单<b class="arrow fa fa-sort"></b></a></li>
      </ul>
      <div class="tab-content"> 
        <!-- 表单 -->
        <form id="form" action="{:U('edit?model='.$model['id'])}" method="post" class="form-horizontal">
            	 <div class="form-item cf">
                    <label class="item-label"><span class="need_flag">*</span>关键词<span class="check-tips"></span></label>
                    <div class="controls">
                      <input type="text" class="text input-large" name="keyword" value="{$data.keyword}">
                    </div>
                  </div>  
                   <div class="form-item cf">
                    <label class="item-label"><span class="need_flag">*</span>标题<span class="check-tips"></span></label>
                    <div class="controls">
                      <input type="text" class="text input-large" name="title" value="{$data.title}">
                    </div>
                  </div>  
                  <div class="form-item cf">
                  		<label class="item-label"><span class="need_flag">*</span>封面图片<span class="check-tips">图片高度控制在200px-400px之间</span></label>
                		<div class="controls uploadrow2" title="点击修改图片" rel="cover">
                            <input type="file" id="upload_picture_cover">
                            <input type="hidden" name="cover" id="cover_id_cover" value="{$data.cover}"/>
                            <div class="upload-img-box" rel="img">
                              <notempty name="data[cover]">
                                <div class="upload-pre-item2"><img width="100" height="100" src="{$data.cover|get_cover_url}"/></div>
                                <em class="edit_img_icon">&nbsp;</em>
                              </notempty>
                            </div>
                      </div>
                  </div>
                  
                  <div class="form-item cf">
                    <label class="item-label"><span class="need_flag">*</span>描述<span class="check-tips"></span></label>
                    <div class="controls">
                      <label class="textarea input-large">
                      <textarea class="text input-large" name="intro" >{$data.intro}</textarea>
                      </label>
                    </div>
                  </div> 
                  <div class="form-item cf toggle-prize_type" style="display:none">
              			<label class="item-label"><span class="need_flag">*</span>是否允许编辑<span class="check-tips"></span></label>
              			<div class="controls">
                        	<select name="can_edit">
                                <volist name=":parse_field_attr($fields['type']['extra'])" id="vo">
                               		<option value="{$key}" <eq name="data[type]" value="$key">selected="selected"</eq>>{$vo|clean_hide_attr} </option>
                                </volist> 
                            </select>       
                      </div>
            	  </div>
                  <div class="form-item cf">
                    <label class="item-label">用户提交后提示内容<span class="check-tips">为空默认为：提交成功，谢谢参与</span></label>
                    <div class="controls">
                       <input type="text" class="text input-large" name="finish_tip" value="{$data.finish_tip}">
                    </div>
                  </div>   
<div class="form-item cf">
        <label class="item-label"><span class="need_flag">*</span>字段管理<span class="check-tips"> </span></label>
        <div style="margin:15px 0;" class="specTable data-table">
          <table cellspacing="1" cellpadding="0">
            <thead>
              <tr>
                <th align="center">字段名称</th>
                <th align="center">字段类型</th>
                <th align="center">选项数据</th>
                <th align="center">是否必填</th>
                <th align="center">操作</th>
              </tr>
            </thead>
            <tbody id="list_data_tbody">
              <volist name="attr_list" id="cd">
                <tr class="list_tr" rel="{$cd.sort}">
                <td align="center"><input type="text" value="{$cd.title}" class="form-control" name="attr_title[{$cd.sort}]" style="width:150px"></td>
                <td align="center"><select name="type[{$cd.sort}]" class="select_type" style="width:150px">
                    <option value="string" <eq name="cd[type]" value="string">selected</eq> >单行输入 </option>
                    <option value="textarea" <eq name="cd[type]" value="textarea">selected</eq> >多行输入 </option>
                    <option value="radio" <eq name="cd[type]" value="radio">selected</eq> >单选 </option>
                    <option value="checkbox" <eq name="cd[type]" value="checkbox">selected</eq> >多选 </option>
                    <option value="select" <eq name="cd[type]" value="select">selected</eq> >下拉选择 </option>
                    <option value="datetime" <eq name="cd[type]" value="datetime">selected</eq> >时间 </option>
                    <option value="picture" <eq name="cd[type]" value="picture">selected</eq> >上传图片 </option>
                  </select></td>
                <td align="center"><input type="text" value="{$cd.extra}" class="form-control" name="extra[{$cd.sort}]" placeholder=""></td>
                <td><input type="checkbox" name="is_must[{$cd.sort}]" value="1" 
                  <if condition="$cd[is_must]==1">checked="checked"</if>
                  > 必填</td>
                <td>
                <input type="hidden" value="{$cd.id}" name="attr_id[{$cd.sort}]">
                <input type="hidden" value="{$cd.value}" name="value[{$cd.sort}]" class="value">
                <input type="hidden" value="{$cd.remark}" name="remark[{$cd.sort}]" class="remark">
                <input type="hidden" value="{$cd.validate_rule}" name="validate_rule[{$cd.sort}]" class="validate_rule">
                <input type="hidden" value="{$cd.error_info}" name="error_info[{$cd.sort}]" class="error_info"> 
                <a href="javascript:void(0);" onclick="move_up(this)" class="move_up">↑</a>&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" onclick="move_down(this)" class="move_down">↓</a>&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" onclick="show_more(this)">高级设置</a>&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" onclick="remove_tr(this)">删除</a></td>
              </tr>
              </volist>
              <tr class="more_tr">
                <td colspan="5"><a href="javascript:add_tr()">+增加新字段</a></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>      
      <div class="controls" style="display:none">
        <label class="item-label"> 详细介绍<span class="check-tips">为空默认只显示描述</span> </label>
        <textarea name="content" style="width:405px; height:100px;">{$data.content}</textarea>
        {:hook('adminArticleEdit', array('name'=>'content','value'=>$data[content]))} </div>
    </div>
    <div class="form-item form_bh">
      <input type="hidden" name="id" value="{$data.id}">
      <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>
    </div>
  </form>
  <table style="display:none">
      <tr id="default_tr1">
        <td align="center"><input type="text" value="" class="form-control" name="attr_title[sort_id]" style="width:150px"></td>
        <td align="center"><select name="type[sort_id]" class="select_type" style="width:150px">
            <option value="string" selected >单行输入 </option>
            <option value="textarea">多行输入 </option>
            <option value="radio">单选 </option>
            <option value="checkbox">多选 </option>
            <option value="select">下拉选择 </option>
            <option value="datetime">时间 </option>
            <option value="picture">上传图片 </option>
          </select></td>
        <td align="center"><input type="text" value="" class="form-control" name="extra[sort_id]"></td>
        <td><input type="checkbox" name="is_must[sort_id]" value="1"> 必填</td>
        <td>
        <input type="hidden" value="" name="value[sort_id]" class="value">
        <input type="hidden" value="" name="remark[sort_id]" class="remark">
        <input type="hidden" value="" name="validate_rule[sort_id]" class="validate_rule">
        <input type="hidden" value="" name="error_info[sort_id]" class="error_info">        
        <a href="javascript:void(0);" onclick="move_up(this)" class="move_up">↑</a>&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" onclick="move_down(this)" class="move_down">向下</a>&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" onclick="show_more(this)">高级设置</a>&nbsp;&nbsp;&nbsp;<a href="javascript:void(0);" onclick="remove_tr(this)">删除</a></td>
      </tr>
      <tr id="default_tr2">
        <td align="center"><input type="text" value="" class="form-control" name="name[sort_id]" style="width:150px"></td>
        <td align="center"><input type="number" value="" class="form-control" name="money[sort_id]" style="width:120px" placeholder="为空时表示免费"></td>
        <td align="center"><input type="number" value="" class="form-control" name="max_limit[sort_id]" style="width:130px" placeholder="为空时表示不限制"></td>
        <td align="center"><input type="number" value="" class="form-control" name="init_count[sort_id]" style="width:100px"></td>
        <td align="center">0</td>
        <td><a href="javascript:void(0);" onclick="remove_tr(this)">删除</a></td>
      </tr>      
  </table>
  
  <div id="default_more_html" style="display:none">
      <div class="form-item cf">
        <label class="item-label">默认值<span class="check-tips"> （字段的默认值） </span></label>
        <div class="controls">
          <input type="text" value="[value]" name="value" id="open_value" class="text input-large">
        </div>
      </div>
      <div class="form-item cf">
        <label class="item-label">字段备注<span class="check-tips"> （用于微预约中的提示） </span></label>
        <div class="controls">
          <input type="text" value="[remark]" name="remark" id="open_remark" class="text input-large">
        </div>
      </div>
      <div class="form-item cf">
        <label class="item-label">正则验证<span class="check-tips"> （为空表示不作验证） </span></label>
        <div class="controls">
          <input type="text" value="[validate_rule]" name="validate_rule" id="open_validate_rule" class="text input-large">
        </div>
      </div>
      <div class="form-item cf">
        <label class="item-label">出错提示<span class="check-tips"> （验证不通过时的提示语） </span></label>
        <div class="controls">
          <input type="text" value="[error_info]" name="error_info" id="open_error_info" class="text input-large">
        </div>
      </div>
      <div class="form-item form_bh">
      <div class="btn_bar"><a href="javascript:;" class="btn confirm_btn">确定</a>&nbsp;&nbsp;<a href="javascript:;" class="border-btn cancel_btn">取消</a></div>
    </div>
  </div>
</div>
</section>
</div>
</div>
</block>
<block name="script">
  <link href="__STATIC__/datetimepicker/css/datetimepicker.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
  <php> if(C('COLOR_STYLE')=='blue_color') echo '
    <link href="__STATIC__/datetimepicker/css/datetimepicker_blue.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
    '; </php>
  <link href="__STATIC__/datetimepicker/css/dropdown.css?v={:SITE_VERSION}" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="__STATIC__/datetimepicker/js/bootstrap-datetimepicker.min.js"></script> 
  <script type="text/javascript" src="__STATIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js?v={:SITE_VERSION}" charset="UTF-8"></script> 
  <script type="text/javascript">
$('#submit').click(function(){
    $('#form').submit();
});

$(function(){
	initUploadImg();
	
    $('.time').datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        language:"zh-CN",
        minView:0,
        autoclose:true
    });
    showTab();
	hide_move();
	
	$('.select_type').each(function(){ select_type(this); });
	$('.select_type').change(function(){ select_type(this); });
});
//增加字段
var tr_sort_id = 0;
function add_tr(){
	var list_count = 0;
	$('.list_tr').each(function() {
		list_count += 1;
		var sort_id = $(this).attr('rel');
		if(sort_id>tr_sort_id) tr_sort_id = sort_id;
    });	
	
	tr_sort_id += 1;
	
	re = new RegExp("sort_id", "g");
	str  = $('#default_tr1').html().replace(re, tr_sort_id);
	//console.log(str);
	var html = '<tr class="list_tr" rel="'+tr_sort_id+'">'+ str +'</tr>';
	if(list_count==0)
	  $('#list_data_tbody tr').before(html);	
	else
	  $('.list_tr:last').after(html);
	  
	hide_move();
	$('.select_type').each(function(){ select_type(this); });
	$('.select_type').change(function(){ select_type(this); });
}
//删除字段
function remove_tr(_this){	
	$(_this).parent().parent().remove();
	hide_move();
}
//排序--向上
function move_up(obj) { 
  var objParentTR = $(obj).parent().parent(); 
  var prevTR = objParentTR.prev(); 
  if (prevTR.length > 0) { 
	prevTR.insertAfter(objParentTR); 
  }
  hide_move();
} 
//排序--向下
function move_down(obj) { 
  var objParentTR = $(obj).parent().parent(); 
  var nextTR = objParentTR.next(); 
  if (nextTR.length > 0) { 
	nextTR.insertBefore(objParentTR); 
  } 
  hide_move();
} 
//第一行只显示向下，最后一行只显示向上
function hide_move(){
	$('.move_up').each(function() {
		$(this).show();
    });
	$('.move_down').each(function() {
		$(this).show();
    });	
	$('.list_tr:first').find('.move_up').hide();
	$('.list_tr:last').find('.move_down').hide();
}
//选择字段类型
function select_type(_this){
	var type = $(_this).val();
	var obj = $(_this).parent().next().find('input');
	
	switch(type){
		case 'textarea': obj.attr('placeholder','').attr('readonly', true); break;
		case 'radio': obj.attr('placeholder','多个选项用空格分开，如：男 女').attr('readonly', false); break;
		case 'checkbox': obj.attr('placeholder','多个选项用空格分开，如：男 女').attr('readonly', false); break;
		case 'select': obj.attr('placeholder','多个选项用空格分开，如：男 女').attr('readonly', false); break;
		case 'datetime': obj.attr('placeholder','').attr('readonly', true); break;
		case 'picture': obj.attr('placeholder','').attr('readonly', true); break;
	    default: obj.attr('placeholder','').attr('readonly', true); break;
	}
}
//高级设置
function show_more(_this){	
	var obj = $(_this).parent();
	
	var value = obj.find('.value').val();
	var remark = obj.find('.remark').val();
	var validate_rule = obj.find('.validate_rule').val();
	var error_info = obj.find('.error_info').val();
	
	var html = $('#default_more_html').html().replace("[value]", value).replace("[remark]", remark).replace("[validate_rule]", validate_rule).replace("[error_info]", error_info);
	$contentHtml = $(html);
	  
	
	$.Dialog.open("高级设置",{width:500,height:500},$contentHtml);
	
	$('.cancel_btn',$contentHtml).click(function(){
		$.Dialog.close();
	})
	$('.confirm_btn',$contentHtml).click(function(){
		obj.find('.value').val( $('#open_value',$contentHtml).val() );
		obj.find('.remark').val( $('#open_remark',$contentHtml).val() );
		obj.find('.validate_rule').val( $('#open_validate_rule',$contentHtml).val() );
		obj.find('.error_info').val( $('#open_error_info',$contentHtml).val() );
		
		$.Dialog.close();
	})
}
</script>
</block>
